<template>
    <div class="content-list">
        <div class="content-header">
            <div class="content-header-title">
                助理
            </div>

            <div class="content-header-action" @click="createPlugin">

                <el-tooltip class="box-item" effect="dark" content="新建插件" placement="bottom">
                    <div class="super-editor-button-box">
                        <MessageSquarePlus />
                    </div>

                </el-tooltip>
            </div>

        </div>

        <el-tabs v-model="activeTabName" class="demo-tabs" @tab-change="tabClick">
            <el-tab-pane label="助理" name="plugin">
                <div class="content-search">
            <el-input v-model="searchItem" placeholder="请输入要搜索的助手" clearable class="content-search-input"
                @focus="focusInput" @blur="blurInput" @change="search" @keyup.enter="search" />
        </div>
        <el-scrollbar class="dataset-list">

            <div v-for="plugin in pluginList" @click="clickPlugin(plugin)" :class="getItemClass(plugin)"
                @mouseenter="handleMouseEnter($event)" @mouseleave="handleMouseLeave($event)">
                <div class="dataset-item-info super-editor-flex">
                    <div class="dataset-logo">
                        {{ plugin.logo }}
                    </div>
                    <div class="item-box">
                        <div class="dataset-name">{{ plugin.name }}</div>
                        <div class="dataset-describe">{{ plugin.describe.substring(0, 14) }}</div>
                    </div>
                </div>

                <div @click.stop="">
                    <div class="dataset-created">{{ plugin.created.substring(5) }}</div>
                    <div class="dataset-action">
                        <el-dropdown trigger="click" placement="top-start" @command="clickDropdown">
                            <div class="super-editor-button-box-middle">
                                <MoreVertical/>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu class="dataset-action-dropdown">
                                    <el-dropdown-item :icon="Top" command="top">置顶</el-dropdown-item>
                                    <el-dropdown-item :icon="CopyDocument" command="copy">复制</el-dropdown-item>
                                    <el-dropdown-item :icon="Delete" :command="plugin"
                                        style="color: red;">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </div>
                </div>
                <el-dialog v-model="plugin.show" title="请注意" width="30%" center>
                    <span>
                        删除后无法恢复，是否继续？--{{ plugin.name }}
                    </span>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="plugin.show = false">取消</el-button>
                            <el-button type="primary" @click="delPlugin(plugin)">
                                确认
                            </el-button>
                        </span>
                    </template>
                </el-dialog>

            </div>

            <div class="super-editor-flex-center plugin-add" v-if="pluginList.length==0" @click="createPlugin">
                <Plus /> 新建助手
            </div>

        </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="助理群" name="plugin-group">
                <div class="content-search">
                    <!-- <el-input v-model="searchDataContent" placeholder="请输入要搜索的数据集" clearable class="content-search-input" -->
                        <!-- @focus="focusDatasetInput" @blur="blurDatasetInput" @keyup.enter="searchDatas" /> -->
                </div>
                <el-scrollbar class="dataset-list">
                    等待实现
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="市场" name="market">
                <div class="content-search">
                    <!-- <el-input v-model="searchItem" placeholder="请输入要搜索的数据集" clearable class="content-search-input" /> -->
                </div>
                <el-scrollbar class="dataset-list">
                    等待实现
                </el-scrollbar>
            </el-tab-pane>
        </el-tabs>


    </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import { getPlugins, deletePlugin, searchPlugins } from '@/api/plugin'
import { MessageSquarePlus,MoreVertical } from 'lucide-vue-next';
import moment from 'moment';
import { Plus } from 'lucide-vue-next';
import {
    Delete,
    Top,
    CopyDocument,
} from '@element-plus/icons-vue'
const pluginList = ref([])

const activeTabName = ref('plugin')

const tabClick = (tabName) => {
    if (tabName == 'plugin') {
        // console.log(tabName);
        // searchDataContent.value = ''
        // userAction('item')
        // clickMsg(msgList.value[0])
    } else if (tabName == 'plugin-group') {
        // initDataset()
    } else if (tabName == 'market') {
        // userAction('market')
    }
}

const init = () => {
    getPlugins().then((result) => {
        pluginList.value = result
        clickPlugin(pluginList.value[0])
    })
}
init()


const userAction = inject('userAction')

// const searchResult = ref([])
// const loading = ref(false)

const searchItem = ref('')


const focusInput = () => {
    // console.log('----focusInput-----',searchItem.value);
    if (searchItem.value.length == 0) {
        pluginList.value = []
    }


}

const blurInput = () => {
    if (!searchItem.value) {
        console.log('blurInput',searchItem.value);
        init()
    }
}
const search = () => {
    searchPlugins(searchItem.value).then(result => {
        pluginList.value = result
    })

}

const activeItem = ref(1)
const getItemClass = (plugin) => {
    if (activeItem.value === plugin.id) {
        return 'dataset-list-item dataset-list-item-active'
    }
    return 'dataset-list-item'
}

const handleMouseEnter = (e) => {
    e.target.children[1].children[0].style.display = 'none'
    e.target.children[1].children[1].style.visibility = 'visible'
}

const handleMouseLeave = (e) => {
    e.target.children[1].children[0].style.display = ''
    e.target.children[1].children[1].style.visibility = 'hidden'
}

const clickDropdown = (plugin) => {
    if (plugin == 'top') {
        console.log('-----top');
    } else {
        plugin.show = true
        console.log(plugin.show, '-----clickDropdown');
    }
}

//点击插件
const clickPlugin = (plugin) => {
    userAction(plugin, 'chat')
    activeItem.value = plugin.id
}
// 创建插件
const createPlugin = () => {
    const plugin = {
        id: 'new' + Date.now(),
        name: '插件',
        prompt: '假设你是一个万能的助理，擅长处理任何问题',
        describe: '描述',
        model: 'gpt-3.5',
        type: 'llm',
        temperature: 0,
        logo: '🍇',
        created: moment().format('YYYY-MM-DD'),
    }
    pluginList.value.push(plugin)
    activeItem.value = plugin.id
    userAction(plugin, 'create')
    // console.log('-----createPlugin');
}
// 删除插件
const delPlugin = (plugin) => {
    plugin.show = false
    console.log(plugin, '-----deletePlugin');
    deletePlugin(plugin.id).then(result => {
        pluginList.value = pluginList.value.filter(item => item.id != plugin.id)
        clickPlugin(pluginList.value[0])
    })

}


</script>

<style scoped>
.content-list {
    height: 100vh;
    /* border-right: 1px solid #e6e6e6; */
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--supereditor-header-height);
    padding: 0 10px;
}

.content-header-title {
    width: 90%;
    font-size: large;
    font-weight: bold;
}

.content-header-add {

    display: inline-flex;
    align-items: center;
    line-height: 0px;
    text-align: center;
}

.content-header-action {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.content-header-action:hover {
    background: #ECEEF5;
    border-radius: 5px;
}

.content-search {
    padding: 10px;
    height: 60px;
    width: 100%;
}

.content-search-input {
    width: 100%;
}

/* .content-search-pop{
    width: 80%;
    padding: 10px;
} */

.content-channel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 30px;
}

.content-channel>:nth-child(n) {
    width: 100px;
    text-align: center;
}

.content-channel-spider {
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
}

::v-deep .dataset-list {
    height: calc(100vh - var(--supereditor-header-height) - 60px -40px);
    padding: 0;
    margin: 0;
    list-style: none;
}

.dataset-list-item {
    /* border-bottom: solid 1px #ECEEF5; */
    margin: 5px 10px;
    border-radius: 4px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.dataset-list-item:hover {
    background-color: var(--supereditor-hover-bg-color);
}

.dataset-list-item-active {
    background-color: #B3D7FF;
}

.plugin-add{
    gap: 8px;
    margin: 0 10px;
    height: 40px;
    cursor: pointer;
    background: #ECEEF5;
    border-radius: 5px;
}

.plugin-add:hover{
    border: 1px solid #B3D7FF;
    
}
.dataset-logo {
    font-size: 40px;
    margin-right: 10px;
}

.dataset-logo>img {
    height: 40px;
    width: 40px;
    margin-right: 10px;

}

.item-box {
    text-align: left;
}

.item-box>div {
    text-align: left;
}

.dataset-name-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.dataset-name {
    font-size: 16px;
    font-weight: bold;
    padding-top: 10px;
}

.dataset-describe {
    /**
	思路：
	1.设置inline-block属相
	2.强制不换行
	3.固定高度
	4.隐藏超出部分
	5.显示“……”
  */
    font-size: 14px;
    padding: 10px 0px;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dataset-created {
    font-size: 12px;
    color: #999999;
    display: "";
}

.dataset-action {
    visibility: hidden;
}


.dataset-action-dropdown {
    font-size: large;
    margin: 5px;
}


::v-deep .el-tabs__nav-scroll {
    display: flex;
    justify-content: start;
    padding-left: 20px;
}

::v-deep .el-tabs__nav-wrap::after {
    background-color: white
}

::v-deep .el-tabs__nav {
    display: flex;
    justify-content: space-between;
    gap: 0 25px;
}

::v-deep .el-tabs__item {
    font-size: 16px;
    /* color: black; */
}
</style>